<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户管理</title>
<link rel="stylesheet" type="text/css" href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<div id="page"></div>
<script type="text/javascript">
Ext.onReady(function(){
	// 表格数据
	var vstore = new Ext.data.JsonStore({
	    autoDestroy: true,
	    url: '${path}/example/list.do',
	    root: 'resultList',
	    idProperty: 'id',
	    fields: ['id', 'name', 'password', 'email', 'intro', 'bornDate']
	});
	vstore.load();

	// 表格
	var gridPanel = new Ext.grid.GridPanel({
		title: "用户表",
		store: vstore,
		height: 400,
		tbar: [
		    {text: "添加", handler: addEmployee},
		    {text: "修改", handler: updateEmployee},
		    {text: "删除", handler: removeEmployee}
		],
		columns: [
			{header: "ID", dataIndex: "id", sortable: true},
			{header: "姓名", dataIndex: "name", sortable: true},
			{header: "密码", dataIndex: "password"},
			{header: "邮件", dataIndex: "email", sortable: true},
			{header: "简介", dataIndex: "intro"},
			{header: "生日", dataIndex: "bornDate", sortable: true, renderer: function(v){ return Ext.util.Format.date(new Date(v), 'Y-m-d H:i:s');}}
		]
	});
	gridPanel.render("page");

	// 添加
	function addEmployee(){
		// 表单
		var formPanel = new Ext.form.FormPanel({
			labelAlign: "right",
			labelWidth: 80,
			border: false,
			layout: "form",
			method: "post",
			items: [
			    {height: 15, border: false},
			    {xtype: "hidden", name: "id"},
				{xtype: "textfield", fieldLabel: "姓名", name: "name"},
				{xtype: "textfield", fieldLabel: "密码", inputType:"password", name: "password"},
				{xtype: "textfield", fieldLabel: "邮件", name: "email"},
				{xtype: "datefield", fieldLabel: "生日", name: "bornDate", format: "Y-m-d"},
				{xtype: "textarea", fieldLabel: "简介", name: "intro", anchor:"-20 55%"}
			],
			buttonAlign: "center",
			buttons:[
			    {text: "保存", handler: function(){
			    	// win.getComponent(0).getForm().submit()
			    	formPanel.getForm().submit({
			    		url: "${path}/example/edit.do",
			    		success: function(form, action){
			    			Ext.Msg.alert("提示", "提交成功!");
			    			win.close();
			    			// 刷新表格
			    			vstore.reload();
			    		},
			    		failure: function(form, acition){
			    			Ext.Msg.alert("提示", "提交失败!");
			    		}
			    	});
			    }},
			    {text: "重置", handler: function(){
			    	formPanel.getForm().reset();
			    }},
			    {text: "关闭", handler: function(){
			    	win.close();
			    }}
			]
		});

		// 窗口
		var win = new Ext.Window({
			title: "用户表单",
			width: 500,
			height: 400,
			modal: true,
			layout: 'fit',
			items: [formPanel]
		});
		win.show();

	}

	// 修改
	function updateEmployee(){
		// 返回RowSelectionModel
		// 获取当前选中的记录
		var record = gridPanel.getSelectionModel().getSelected();
		var id = record.get("id");

		// 表单
		var formPanel = new Ext.form.FormPanel({
			labelAlign: "right",
			labelWidth: 80,
			border: false,
			layout: "form",
			method: "post",
			items: [
			    {height: 15, border: false},
			    {xtype: "hidden", name: "id"},
				{xtype: "textfield", fieldLabel: "姓名", name: "name"},
				{xtype: "textfield", fieldLabel: "密码", inputType:"password", name: "password"},
				{xtype: "textfield", fieldLabel: "邮件", name: "email"},
				{xtype: "datefield", fieldLabel: "生日", name: "bornDate", format: "Y-m-d", renderer: function(v){ return Ext.util.Format.date(new Date(v), 'Y-m-d H:i:s');}},
				{xtype: "textarea", fieldLabel: "简介", name: "intro", anchor:"-20 55%"}
			],
			buttonAlign: "center",
			buttons:[
			    {text: "保存", handler: function(){
			    	// win.getComponent(0).getForm().submit()
			    	formPanel.getForm().submit({
			    		url: "${path}/example/edit.do",
			    		success: function(form, action){
			    			Ext.Msg.alert("提示", "提交成功!");
			    			win.close();
			    			// 刷新表格
			    			vstore.reload();
			    		},
			    		failure: function(form, acition){
			    			Ext.Msg.alert("提示", "提交失败!");
			    		}
			    	});
			    }},
			    {text: "重置", handler: function(){
			    	formPanel.getForm().reset();
			    }},
			    {text: "关闭", handler: function(){
			    	win.close();
			    }}
			]
		});

		// 加载数据
		// 从页面上选中的记录数据
		// formPanel.getForm().loadRecord(record);
		// 从远程加载数据
		formPanel.getForm().load({
			url: "${path}/example/get.do",
			params: {id: id},
			method: "get",
			waitMsg: "等待",
			success: function(form, action){

    		},
    		failure: function(form, acition){
    		}
		});

		// 窗口
		var win = new Ext.Window({
			title: "用户表单",
			width: 500,
			height: 400,
			modal: true,
			layout: 'fit',
			items: [formPanel]
		});
		win.show();
	}

	// 删除
	function removeEmployee(){
		var record = gridPanel.getSelectionModel().getSelected();
		var id = record.get("id");
		Ext.Ajax.request({
			url: "${path}/example/remove.do",
			params: {id: id},
			method: "post",
			// resp 返回值
			// opts 自身
			success: function(resp, opts){
				// console.dir(arguments);
				// 正常处理
				// var respText = Ext.util.JSON.decode(resp.responseText);
                // Ext.Msg.alert('提示', respText.info);
				Ext.Msg.alert("提示", "提交成功!");
				// 刷新表格
    			vstore.reload();
    		},
    		failure: function(resp, opts){
    			Ext.Msg.alert("提示", "提交失败!");
    		}
		});
	}
});
</script>
</body>
</html>
